<template>
  <div class="flex h-full">
    <div class="condition-logic" v-if="form.publicjson.length > 1">
      <div class="left"></div>
      <Select
        v-model="form.andor" 
        style="width: 50px"
        class="mr-2"
        size="small"
      >
        <Option :key="logic.value" :value="logic.value" v-for="logic in LOGIC_OPTIONS">{{logic.name}}</Option>
      </Select>
      <div class="right"></div>
    </div>
    <div class="h-full">
      <div
        v-for="(condition, cIndex) in form.publicjson"
        class="flex items-center mb-1"
        :key="cIndex"
      >
        <Select
          v-model="condition.condition"
          style="width: 50px"
          size="small"
          class="mr-2"
          @on-change="handleOperatorChange(cIndex, $event)"
        >
          <Option
            v-for="operator in OPERATOR_OPTIONS[condition.vartype]"
            :key="operator.mark"
            :value="operator.mark"
            :label="operator.mark"
            >{{ operator.name }}</Option
          >
        </Select>
        <div>
          <Select class="mb-1" v-model="condition.varname" @on-change="handleInputChange(cIndex, $event)">
            <Option
              v-for="sql in sqlList"
              :key="sql.fieldname"
              :value="sql.fieldname"
              >{{ sql.fieldname }}</Option
            >
          </Select>
          <Input
            v-model="condition.varparam"
            :disabled="
              !!OPERATOR_VALUES[condition.vartype][condition.condition]?.equal
            "
          >
            <template #prefix>
              <p class="flex items-center h-full text-xs scale-75">
                {{ condition.vartype }}
              </p>
            </template>
          </Input>
        </div>
        <Icon
          class="ml-2 pointer"
          type="md-remove"
          size="16"
          @click.stop="removeCondition(cIndex)"
        />
      </div>
    </div>
  </div>
  <Button @click.stop="addCondition()" icon="md-add" type="primary" size="small"
    >添加条件</Button
  >
</template>
<script setup>
import { ref, onMounted, computed } from 'vue';
import { OPERATOR_OPTIONS, LOGIC_OPTIONS, OPERATOR_VALUES } from '../../lib/constant';

const emit = defineEmits(['update:logic'])

const props = defineProps({
  form: {
    type: Object,
    default: () => {},
  },
  data: {
    type: Array,
    default: () => [],
  },
  logic: {
    type: Number,
    default: 0
  },
  sqlList: {
    type: Array,
    default: () => [],
  }
});

// const localLogic = ref(props.logic);
// onMounted(()=>{
//   localLogic.value = props.logic
//   })

// const computedLogic = computed({
//   get: () => localLogic.value,
//   set: (value) => (localLogic.value = Number(value)),
//   })
const addCondition = () => {
  props.form.publicjson.push({
    varname: '',
    varparam: '',
    vartype: 'String',
    condition: '',
  });
};

const removeCondition = (cIndex) => {
  props.form.publicjson.splice(cIndex, 1);
};

const handleInputChange = (cIndex, e) => {
  // const item = props.sqlList.find(sql => sql.fieldname == e);
  // props.form.publicjson[cIndex].vartype = item.type;
}

const handleOperatorChange = (cIndex, e) => {
  const equal = OPERATOR_VALUES[props.form.publicjson[cIndex].vartype][e]?.equal;
  if (equal) {
    props.form.publicjson[cIndex].value = equal;
  } else {
    props.form.publicjson[cIndex].value = '';
  }
};
</script>
<style lang="scss">
.condition-logic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 50px;
  height: auto;

  .left,
  .right {
    border: 1px solid rgb(68 83 130 / 25%);
    width: 50%;
    height: calc(50% - 47px);
    translate: 50%;
  }
  .left {
    border-right: 0;
    border-bottom: 0;
    border-top-left-radius: 6px;
  }
  .right {
    border-right: 0;
    border-top: 0;
    border-bottom-left-radius: 6px;
  }
}

.ivu-input-with-prefix {
  padding-left: 38px;
}
</style>
